<template>
    <div>
        <van-cell-group>
            <van-field v-model="sexText" label="性别"  readonly @click.native="sexShow = true" placeholder="请选择性别" input-align="right" />
        </van-cell-group>

       <van-button type="primary" style="display: block; margin: 30px auto; width: 90%;" @click="submit">确认修改</van-button>

        <van-popup position="bottom" v-model="sexShow">
            <van-picker :columns="sexList"  @cancel="sexShow = false" show-toolbar @confirm="sexChange"></van-picker>
        </van-popup>
    </div>
</template>

<script>
export default {
    name: 'editInfo',
    data() {
        return {
            sexShow: false,
            sex: '', //性别
            sexText: '',
            sexList: [{
                text: '男',
                value: 1
            }, {
                text: '女',
                value: 2
            }, {
                text: '保密',
                value: 0
            }]
        }
    },

    methods: {
        sexChange(data) {
            this.sexShow = false;
            this.sex = data.value;
            this.sexText = data.text;
        },

        submit() {
            let params = {
                sex: this.sex, //性别
            };

            if (params.sex === '') {
                this.$toast('请选择性别');
                return;
            }
            this.$http.post('/user/user/front/modifyUser', params).then(res => {
                if (res.status === 0) {
                    this.$store.dispatch('getUserInfo', this.$store.state.userInfo.token).then(() => {
                        this.$toast.success('修改成功');
                        setTimeout(() => {
                            this.$router.back();
                        }, 700)
                    })
                } else {
                    this.$toast.fail(res.messasge);
                }
            })
        }
    },
    created() {
        if (this.$route.query.sex !== undefined) {
            this.sex = this.$route.query.sex;
            let stack = this.sexList.filter(e => (
                e.value == this.$route.query.sex
            ))[0];
            if (stack) {
                this.sexText = stack.text;
            }
        }
    }
}
</script>

<style lang="scss">
.avatar {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    img {
        height: 40px;
        width: 40px;
        border-radius: 50%;
    }
}
</style>
